<template>
  <!-- 维保历史工单全部 -->
  <view class="records" @click="toDetail(item)">
    <view class="records-item" :style="isListSty ? 'width:100%;margin: 20rpx 0 0 0;' : ''">
      <view class="records-item-head">
        <view class="buildding">
          <!-- <image src="@/static/images/index/build.svg	" mode=""></image> -->
          <view :class="isListSty ? 'isListSty' : ''">
            <view v-if="item.typeStatus !== 1">完成时间: {{ dateStringFilter(item.planEndTime) }}</view>
            <view v-else>维保签字时间: {{ dateStringFilter(item.maintainSignatureTime) }}</view>
          </view>
        </view>
        <!-- 如果是保养且是维保签字 -->
        <view class="status" v-if="item.typeStatus == 1">
          <image :src="item.status == 4 ? '/static/images/index/s4d.png' : '/static/images/index/5n.png'"></image>
          <view :style="{ color: '#333' }">{{

            item.status == 4 ? '已完成' : '维保签字'
          }}</view>
        </view>
        <view class="status" v-if="item.typeStatus != 1">
          <image src="@/static/images/index/s4d.png"></image>
          <view :style="{ color: '#333' }">{{
            ["", "签字完成", "已完成", "已救援", "已完成", "已完成", "已完成", "已完成", "已完成", "已完成"][item.typeStatus]
          }}</view>

        </view>
      </view>

      <view class="records-item-content">
        <view class="tagDesc">
          <view class="left">
            <view class="tags" v-if="item.typeStatus == 1">
              <!-- 电梯详情->维保历史->全部 -->
              <tags-component label="保养：" :templateNames="item.templateNames" :displayCount="4" />
            </view>
            <view class="tags" v-if="item.typeStatus == 2">
              <view class="lable">维修：</view>
              <view class="tag" v-if="item.partsNames">{{ sliceStr(item.partsNames) }}</view>
              <template v-if="item.problemItemNames">
                <view class="tag" v-for="tag in item.problemItemNames" :key="tag">{{ tag }}</view>
              </template>
            </view>
            <view class="tags" v-if="item.typeStatus == 4">
              <view class="lable">配件：</view>
              <view class="lab blue">{{ sliceStr(item.partsName) }}</view>
              <view class="lab blue">数量:{{ item.partsNum }}</view>
              <!-- <view class="tag">{{ item.partsName }}
                <view class="lab blue">数量:{{ item.partsNum }}</view>
              </view> -->
            </view>

            <view class="rescueTag" v-if="item.typeStatus == 3">
              <view class="label">困人:</view>
              <view class="rescue_right">{{ item.trapDesc || "-" }}</view>

            </view>

            <block v-if="[5, 6].includes(item.typeStatus)">
              <view class="tags">
                <view class="label">工单类型: </view>
                <view class="tag" style="border:none; color: #333333;">{{ ["事务工单", "质量检查"][item.typeStatus - 5] }}</view>
              </view>
              <view class="tags_desc">
                <view class="lable_tit">{{ ["任务描述:", "任务描述:"][item.typeStatus - 5] }}</view>
                <text class="lable_desc">{{ item.planDesc || "-" }}</text>
              </view>
            </block>

            <block v-if="item.typeStatus == 9">
              <view class="tags">
                <view class="label">工单类型：</view>
                <view class="tag noBorder">整改工单</view>
              </view>
              <view class="tags_desc">
                <view class="lable_tit">整改事项：</view>
                <text class="lable_desc">{{ item.scoreIssue }}</text>
              </view>
            </block>

            <view class="tags" style="margin:0px" v-if="item.emerProcType && ![3, 5, 6].includes(item.typeStatus)">
              <text class="emerProcTag" v-for="(it, i) in btnBoxList" :key="i"
                :style="{ color: it.color, borderColor: it.color, }" v-if="item.emerProcType == it.key">
                {{ it.label }}
              </text>
            </view>
          </view>
          <!-- 人员 -->
          <view class="right" v-if="item.userNames && item.userNames.length <= 2">
            <view v-for="(user, uIdx) in item.userNames" :key="uIdx" :class="['menber']">
              <view></view>
              <text>
                {{ user.length > 2 ? user.slice(-2) : user }}
              </text>
            </view>

            <image v-if="item.userNames && item.userNames.length > 2" src="@/static/images/down.png" mode="">
            </image>
          </view>
          <zb-tooltip @handchange="handchange($event, parentIdx, childIdx)" :items="item" @click.stop
            v-if="item.userNames && item.userNames.length > 2" placement="bottom" background="#fff" :right="20" :topS="40"
            color="#333" :showIcon="false">
            <view class="right">
              <view v-for="(user, uIdx) in item.userNames.slice(0, 2)" :key="uIdx" :class="['menber']" :style="{
                background: !user.signUser.isPlanStatus
                  ? '#b9b9b9'
                  : userinfo.nick_name === user.signUser.userName
                    ? '#0091ff'
                    : '#00C6C0',
              }">
                <text>
                  {{ user.length > 2
                    ? user.slice(-2)
                    : user }}
                </text>
                <!-- <text v-else>{{
                  user.userName.length > 2
                    ? user.userName.slice(-2)
                    : user.userName
                }}</text> -->
              </view>
              <image v-if="item.userNames && item.userNames.length > 2"
                :style="item.usermore ? 'transform: rotate(180deg);' : ''" src="@/static/images/down.png" mode=""></image>
            </view>
            <view class="userlist" slot="content">
              <view v-for="(user, uIdx) in item.userNames" :key="uIdx" class="userlist-item">
                <view :class="['menber']" :style="{
                  background: !user.signUser.isPlanStatus
                    ? '#b9b9b9'
                    : userinfo.nick_name === user.signUser.userName
                      ? '#0091ff'
                      : '#00C6C0',
                }">
                  <text>
                    {{
                      user.length > 2
                      ? user.slice(-2)
                      : user
                    }}
                  </text>
                  <!-- <text v-else>{{
                    user.userName.length > 2
                      ? user.userName.slice(-2)
                      : user.userName
                  }}</text> -->
                </view>
                <view class="userlist-item-name" :style="!user.signUser.isPlanStatus
                      ? 'color: #999999;'
                      : 'color: #333'
                    ">
                  <text>{{ user.length > 2
                    ? user.slice(-2)
                    : user }}</text>
                </view>
              </view>
            </view>
          </zb-tooltip>
        </view>
      </view>
      <!-- 延期保养操作 -->
      <view class="delate">
        <view class="labs" v-if="item.typeStatus == 1">
          <view class="lab" v-if="item.overdueDayName">
            {{ item.overdueDayName }}
          </view>
          <view class="lab" style="background: #fdf1e9; color: #fa6400" v-if="(item.timeliness && item.timeliness.indexOf('超时') != -1) ||
            (item.isDeferred === 1 && item.timeliness != '及时')
            ">
            {{ item.timeliness }}</view>
        </view>
        <!-- <view class="labs" v-if="item.typeStatus == 4">
          <view class="label">配件:</view>
          <view class="lab blue">{{ item.partsName }}</view>
          <view class="lab blue">数量:{{ item.partsNum }}</view>
        </view> -->
      </view>
      <!-- <view class="delate">
				<view class="labs" v-if="item.typeStatus == 1">
					<view class="lab" v-if="(item.deferType === 1 || item.deferType === 5)">{{
						item.deferType ===
						1 ? '已延期' : '特殊延期'
					}} </view>
				</view>
			</view> -->
    </view>

    <!-- 延期保养对话框start -->
    <!-- <uni-popup ref="deferredPopup">
			<view class="popup">
				<view class="title">延期保养</view>
				<view class="content">
					<view>此任务将推迟到</view>
					<view class="delay_date">
						<text>{{ tomorrowDate + '(明天)' }}</text>
						执行
					</view>
					<view class="delay_detail">
						<view>{{ item.buildingName + item.elevatorAddress }}</view>
						<view>{{ contentList.join(',').replace(/,/g, '+') }}</view>
					</view>
				</view>
				<view class="bottom">
					<view @click="$refs.deferredPopup.close()">取消</view>
					<view class="comfire" @click="rescueComfire">确认</view>
				</view>
			</view>
		</uni-popup> -->
    <!-- 延期保养对话框end -->
  </view>
</template>

<script>
import { getContent } from '@/apis/index.js';
import { formatTime } from '@/utils/utils.js';
import { setRescue } from '@/apis/rescue.js';
import { mapState, mapActions } from 'vuex';
import dayjs from 'dayjs';
// 多标签组件
import tagsComponent from '@/components/tagsComponents/index';

export default {
	components: { tagsComponent },
	props: {
		item: {
			type: Object,
		},
		tabIdx: {
			type: Number,
			default: 0,
		},
		// typeIdx: {
		// 	type: Number,
		// 	default: 0
		// },
		userMore: {
			type: Boolean,
			default: false,
		},
		elevatorId: {
			type: String,
		},
		// parentIdx: {
		// 	type: Number
		// },
		// childIdx: {
		// 	type: Number
		// },
		isListSty: {
			type: Boolean,
			default: false,
		},
	},
	computed: {
		...mapState('user', ['userinfo']),
		showTurnBtn() {
			let flag = false;

			if (this.item.auditType === 1) {
				// 非年审梯
				// 如果是待处理//非年审梯
				if (
					this.item.status === 1 &&
          (!this.item.timeliness || this.item.timeliness == '及时')
				) {
					flag = true;
				}
			} else {
				// 如果是待处理//年审梯
				if (
					this.item.status === 1 &&
          (!this.item.timeliness || this.item.timeliness == '及时')
				) {
					flag = true;
					// 年审梯 已延期特殊延期过 不显示更多按钮
					if (this.item.planDate) {
						if (
							(this.item.deferType === 1 || this.item.deferType === 5) &&
              new Date(this.item.planDate.replaceAll('-', '/')).getTime() /
              1000 ===
              new Date(dayjs().format('YYYY/MM/DD')).getTime() / 1000
						) {
							flag = false;
						}
					}
				}
			}

			return flag;
		},
	},
	data() {
		return {
			btnBoxList: [  // 紧急程度标签
				{ color: '#0091FF', bgColor: '#dcf0ff', label: '较低', key: '4', },
				{ color: '#F7B500', bgColor: '#fff7e1', label: '普通', key: '3', },
				{ color: '#fa6400', bgColor: '#ffecdf', label: '紧急', key: '2', },
				{ color: '#e02020', bgColor: '#ffecec', label: '非常紧急', key: '1', },
			],
			statusBy: {
				// 保养状态列表
				1: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png',
				},
				2: {
					text: '进行中',
					color: '#0091ff',
					icon: '/static/images/index/2.png',
				},
				3: {
					text: '已提交',
					color: '#F7B500',
					icon: '/static/images/index/3.png',
				},
				4: {
					text: '签字完成',
					color: '#333',
					icon: '/static/images/index/s4d.png',
				},
				5: {
					text: '维保签字',
					color: '#333',
					icon: '/static/images/index/5.png',
				},
			},
			statusWx: {
				// 维修状态
				1: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png',
				},
				2: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png',
				},
				3: {
					text: '进行中',
					color: '#0091ff',
					icon: '/static/images/index/2.png',
				},

				4: {
					text: '已完成',
					color: '#333',
					icon: '/static/images/index/s4d.png',
				},
				5: {
					text: '已关闭',
					color: '#999',
					icon: '',
				},
				6: {
					text: '已驳回',
					color: '#999',
					icon: '',
				},
			},
			statusPj: {
				// 配件状态
				5: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png',
				},
				6: {
					text: '更换中',
					color: '#0091ff',
					icon: '/static/images/index/2.png',
				},

				7: {
					text: '已完成',
					color: '#333',
					icon: '/static/images/index/s4d.png',
				},
				9: {
					text: '已关闭',
					color: '#999',
					icon: '',
				},
				8: {
					text: '已驳回',
					color: '#999',
					icon: '',
				},
			},
			statusRescue: {
				// 配件状态
				1: {
					text: '调度中',
					color: '#16BF99',
					icon: '/static/images/index/1.png',
				},
				3: {
					text: '已出发',
					color: '#0091ff',
					icon: '/static/images/index/2.png',
				},

				4: {
					text: '已到达',
					color: '#0091ff',
					icon: '/static/images/index/2.png',
				},
				5: {
					text: '已救援',
					color: '#999',
					icon: '',
				},
			},
			tomorrowDate: formatTime(new Date().getTime() + 24 * 60 * 60 * 1000),
			contentList: [],
		};
	},
	created() { 
	},
	methods: {
		sliceStr(str) {
			if (str.length >= 15) {
				str = str.slice(0, 15) + '...';
			}
			return str;
		},
		// 延迟保养
		handleDelay(item, type, planId) {
			console.log(item);
			uni.showActionSheet({
				itemList: [type == 1 ? '延期保养' : '转单'],
				success: async (res) => {
					if (res.tapIndex == 0) {
						this.contentList = await this.fetchTemContent();
						this.$refs.deferredPopup.open();
					}
				},
				fail(res) { },
			});
		},
		// 更多操作 年审和非年审跳转
		handleMore(item) {
			if (
				this.item.planContentUserVos &&
        this.item.planContentUserVos.length > 0
			) {
				let result = this.item.planContentUserVos.some(
					(it) => it.userId === this.userinfo.user_id
				);
				if (!result) {
					uni.showModal({
						title: '提示',
						content: '你没有权限操作该任务',
						showCancel: false,
						confirmText: '我知道了',
						success: (res) => {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						},
					});
					return;
				}
			}

			let arr = ['延期保养', '提前保养'];
			if (
				item.status === 1 &&
        (!item.timeliness || item.timeliness == '及时')
			) {
				// 待开始+未逾期
				if (item.auditType === 2) {
					// 年审类型
					arr = ['延期保养'];
					if (item.deferType === 5 || item.deferType === 1) {
						// 被特殊年审延期过后
						arr = ['提前保养'];
					}
				}

				if (item.auditType === 1) {
					// 非年审类型
					if (item.planDate) {
						if (
							new Date(item.planDate.replaceAll('-', '/')).getTime() / 1000 <=
              new Date().getTime() / 1000
						) {
							// 小于等于今天任务的日期只显示延期
							arr = ['延期保养'];
						}
					}
				}

				uni.showActionSheet({
					itemList: arr,
					success: async (res) => {
						let needObj = {
							planId: this.item.planId,
							buildingAddress:
                this.item.buildingName + this.item.elevatorAddress,
							planCheckName: this.item.templateNames
								? this.item.templateNames[0]
								: '',
							planDate: this.item.planDate,
							auditType: this.item.auditType,
						};
						if (this.item.auditType === 1) {
							// 非年审
							let str = '';
							if (res.tapIndex === 0) {
								// 去延期保养页面
								str =
                  '/pageModules/yearTrial/calendarEdit?needObj=' +
                  JSON.stringify(needObj) +
                  '&nums=' +
                  1;
							}
							if (res.tapIndex === 1) {
								// 去提前保养页面
								str =
                  '/pageModules/yearTrial/calendarEdit?needObj=' +
                  JSON.stringify(needObj) +
                  '&nums=' +
                  2;
							}
							uni.navigateTo({
								url: str,
							});
						}
						if (item.auditType === 2) {
							// 年审
							if (res.tapIndex == 0 && arr[0] === '延期保养') {
								uni.navigateTo({
									url:
                    '/pageModules/yearTrial/yearDelay?needObj=' +
                    JSON.stringify(needObj),
								});
							}
							if (res.tapIndex == 0 && arr[0] === '提前保养') {
								uni.navigateTo({
									url:
                    '/pageModules/yearTrial/calendarEdit?needObj=' +
                    JSON.stringify(needObj) +
                    '&nums=' +
                    3,
								});
							}
						}
					},
					fail(res) { },
				});
			}
		},
		fetchTemContent() {
			return new Promise((resolve) => {
				getContent({ planId: this.item.planId })
					.then((res) => {
						resolve(res.data);
					})
					.catch((resolve) => {
						resolve([]);
					});
			});
		},
		// 延期保养
		rescueComfire() {
			setRescue({ id: this.item.planId, isDeferred: 1 }).then((res) => {
				// console.log(res,'延期保养')
				if (res) {
					uni.showToast({
						title: '延期成功',
						icon: 'none',
					});
					this.$refs.deferredPopup.close();
					this.$emit('update');
				}
			});
		},
		handchange(val, parentIdx, childIdx) {
			// this.list[index].usermore = val;
			// console.log(val,index);
			this.$emit('userMore', { val, parentIdx, childIdx });
		},
		dateStringFilter(date) {
			if (!date) {
				return '';
			} else {
				// date.slice(0, 10)
				return date.replaceAll('-', '/');
			}
		},
		// 去工单详情
		toDetail(item) {
			console.log(item, 9999);
			if (item.typeStatus == 2) {
				// 维修详情
				uni.navigateTo({
					url:
            '/subpages/repair/repariDetail?planId=' +
            item.planId +
            '&elevatorId=' +
            this.elevatorId,
				});
			}
			// 配件更换
			if (item.typeStatus == 4) {
				uni.navigateTo({
					url: `/subpages/workOrders/partOrder?planId=${item.planId}&elevatorId=${this.elevatorId}`,
				});
			}
			if (item.typeStatus == 1) {
				// 保养详情
				// let objs = {
				// 	overdueName: item.timeliness,
				// 	planCheckName: item.templateNames && item.templateNames.join(","),
				// }
				let overdueName = item.timeliness;
				let planCheckName = item.templateNames && item.templateNames.join(',');
				uni.navigateTo({
					url: `/subpages/workOrders/detail?planId=${item.planId}&elevatorId=${this.elevatorId}&overdueName=${overdueName}&planCheckName=${planCheckName}`,
				});
			}

			if (item.typeStatus == 3) {
				uni.navigateTo({
					url: `/subpages/rescue/rescueDetail?type=1&planId=${item.planId}&elevatorId=${this.elevatorId}`,
				});
			}
			if (item.typeStatus === 5) {// 事务
				uni.navigateTo({
					url: `/subpages/repair/affair/affairDetail?planId=${item.planId}&elevatorId=${this.elevatorId}`,
				});
			}
			if (item.typeStatus === 6) {// 质检
				uni.navigateTo({
					url: `/subpages/quality/qualityDetail?planId=${item.planId}&elevatorId=${this.elevatorId}`,
				});
			}
      // 整改
      if (item.typeStatus === 9) {
        uni.navigateTo({
          url: `/subpages/correction/detail?planId=${item.planId}&elevatorId=${this.elevatorId}`,
        });
      }
		},
	},
};
</script>

<style lang="scss" scoped>
.records {
  width: 100%;
  color: #333;

  &-item {
    width: calc(100% - 20rpx);
    margin: 0rpx 20rpx 16rpx 0rpx;
    background-color: #fff;
    border-radius: 8rpx;
    box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(177, 177, 177, 0.5);

    &-head {
      display: flex;
      color: #333333;
      font-size: 26rpx;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2rpx solid #eeeeee;
      padding: 20rpx;
      box-sizing: border-box;
      height: 68rpx;

      .buildding {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex: 1;
        color: #999;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 7rpx;
          padding-top: 5rpx;
        }

        view {
          flex: 1;
          line-height: 38rpx;
        }

        .isListSty {
          font-size: 24rpx;
        }
      }

      .status {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        width: 144rpx;

        image {
          width: 32rpx;
          padding-top: 3rpx;
          height: 32rpx;
          margin-right: 7rpx;
        }
      }
    }

    .tagDesc {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: flex-start;
    }

    .delate {
      padding: 0 20rpx;
      padding-bottom: 12rpx;

      .labs {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: baseline;

        .label {
          font-size: 26rpx;
          color: #666;
          margin-right: 16rpx;
        }

        .lab {
          font-size: 24rpx;
          color: #e02020;
          background: #ffe3e3;
          padding: 0rpx 13rpx;
          border-radius: 4rpx;
          margin: 8rpx 0;
          margin-right: 8rpx;
        }

        .blue {
          color: #0091ff;
          background: #dcf0ff;
        }
      }
    }

    &-content {
      padding: 0rpx 20rpx;
      display: flex;
      align-items: center;
      // padding-bottom: 12rpx;
      position: relative;

      .left {
        flex: 1;
        padding: 16rpx 0;

        .name {
          font-size: 32rpx;
          font-weight: bold;
        }

        .tags {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: baseline;
          font-size: 26rpx;
          color: #666;
          
          margin-bottom: 0;
          position: relative;

          .tag {
            border: 2rpx solid #cccccc;
            border-radius: 20rpx;
            font-size: 24rpx;
            padding: 0rpx 13rpx;
            margin: 8rpx 0;
            margin-right: 12rpx;
            color: #333;
          }

          .lab {
            font-size: 24rpx;
            color: #e02020;
            background: #ffe3e3;
            padding: 0rpx 13rpx;
            border-radius: 4rpx;
            margin: 8rpx 0;
            margin-right: 8rpx;
          }

          .blue {
            color: #0091ff;
            background: #dcf0ff;
          }

          .emerProcTag {
            font-size: 24rpx;
            border: solid 2rpx transparent;
            padding: 0 13rpx;
            border-radius: 8rpx;
            margin: 8rpx 0;
          }
        }

        .rescueTag {
          display: flex;
          font-size: 26rpx;
          color: #666;
          margin-bottom: 32rpx;
          margin-top: 26rpx;

          .label {
            // margin-right: 16rpx;
            width: 76rpx;
          }

          .rescue_right {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
          }
        }
      }

      .right {
        display: flex;
        align-items: center;
        // width: 170rpx;
        justify-content: flex-end;
        flex-wrap: wrap;
        margin-top: 16rpx;
        .menber {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20rpx;
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          background-color: #b9b9b9;
          color: #fff;
          margin-left: 4rpx;
        }

        image {
          width: 25rpx;
          height: 25rpx;
          margin-left: 5rpx;
          transition: 0.3s all;
        }
      }

      .userlist {
        &-item {
          display: flex;
          align-items: center;
          width: 180rpx;
          margin-bottom: 17rpx;

          .menber {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20rpx;
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            background-color: #0091ff;
            color: #fff;
            margin-left: 4rpx;
            margin-right: 14rpx;
          }

          &-name {
            font-size: 24rpx;
            color: #333;
            overflow: hidden;
            flex: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        &-item:last-child {
          margin-bottom: 0;
        }
      }
    }

    &-bottom {
      padding: 20rpx;
      border-top: 2rpx solid #eeeeee;
      color: #999999;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .handle {
    padding: 0 16rpx;
    height: 68rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 2rpx solid #eeeeee;

    .handle_btn {
      height: 36rpx;
      padding: 0 30rpx;
      border: 2rpx solid #cccccc;
      border-radius: 4rpx;
      color: #333;
      font-size: 24rpx;
      display: flex;
      align-items: center;
    }
  }

  .tags_desc {
    display: flex;
    font-size: 26rpx;
    color: #666;

    .lable_tit {
      white-space: nowrap;
    }

    .lable_desc {
      // width: 400rpx;
      margin-left: 16rpx;
      margin-bottom: 16rpx;
      color: #333;
    }
  }

  .popup {
    padding: 24rpx 28rpx 0 28rpx;
    box-sizing: border-box;
    background-color: #fff;
    width: 506rpx;
    border-radius: 16rpx;

    .title {
      color: #333;
      font-size: 32rpx;
      font-weight: 500;
      padding-bottom: 20rpx;
    }

    .content {
      text-align: center;
      color: #333;
      margin-bottom: 38rpx;

      .delay_date {
        margin-bottom: 16rpx;
        font-size: 28rpx;

        text {
          color: #0091ff;
        }
      }

      .delay_detail {
        color: #999;
        font-size: 24rpx;
      }
    }

    .bottom {
      display: flex;
      border-top: 2rpx solid #f5f5f5;
      height: 76rpx;

      view {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #999;
      }

      .comfire {
        color: #0091ff;
        border-left: 2rpx solid #f5f5f5;
      }
    }
  }
}
</style>
